<template>
  <div>
    <h1>信息公告</h1>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>公告名称</th>
          <th>发布时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(announcement, index) in announcements" :key="announcement.id">
          <td><img src="/public/images/pic3.png" alt="政策法规图标" class="policy-icon" /> <!-- 固定 icon --></td>
          <td>{{ announcement.title }}</td>
          <td>{{ announcement.publishDate }}</td>
          <td><a href="#" @click.prevent="goToDetail(announcement.id)">查看</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import Mock from 'mockjs';

export default {
  data() {
    return {
      announcements: []
    };
  },
  created() {
    this.fetchAnnouncements();
  },
  methods: {
    fetchAnnouncements() {
      const data = Mock.mock({
        'announcements|10': [{
          'id|+1': 1,
          title: '@title(5, 10)',
          publishDate: '@date("yyyy-MM-dd")'
        }]
      });
      this.announcements = data.announcements;
    },
    goToDetail(id) {
      this.$router.push(`/announcements/${id}`);
    }
  }
};
</script>

<style scoped>
h1 {
  margin-bottom: 20px;
  font-size: 24px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f0f0f0;
}

th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

tr:hover {
  background-color: #f5f5f5;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>